<template>
  <div>
    <el-dialog
      :visible.sync="dialog.search"
      :close-on-click-modal="false"
      title="高级搜索"
      width="80%"
      append-to-body
    >
      <el-form ref="searchForm" :model="searchForm" label-width="120px">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="父名称" prop="parentTitle" label-for="parentTitle">
              <el-input
                v-model="searchForm.parentTitle"
                element-id="parentTitle"
                placeholder="请输入父名称"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="类别名称" prop="title" label-for="title">
              <el-input
                v-model="searchForm.title"
                element-id="title"
                placeholder="请输入类别名称"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="类别描述" prop="description" label-for="description">
              <el-input
                v-model="searchForm.description"
                element-id="description"
                placeholder="请输入类别描述"
                clearable
                @keyup.enter.native="searchOkDialog"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="版本号">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="versionMin">
                    <el-input-number
                      v-model="searchForm.versionMin"
                      placeholder="请输入开始版本号"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="versionMax">
                    <el-input-number
                      v-model="searchForm.versionMax"
                      placeholder="请输入结束版本号"
                      style="width: 100%;"
                      @keyup.enter.native="searchOkDialog"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="创建时间">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="createTimeMin">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.createTimeMin"
                      placeholder="请输入开始创建时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="createTimeMax">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.createTimeMax"
                      placeholder="请输入结束创建时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="更新时间">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="updateTimeMin">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.updateTimeMin"
                      placeholder="请输入开始更新时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="updateTimeMax">
                    <el-date-picker
                      type="datetime"
                      v-model="searchForm.updateTimeMax"
                      placeholder="请输入结束更新时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%;"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="是否可用" prop="isActive">
              <el-select
                v-model="searchForm.isActive"
                placeholder="请选择是否可用"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.isActiveSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="searchOkDialog" :loading="loading.search">搜索</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
export default {
  name: 'ArticleCategorySearch',
  data() {
    return {
      dialog: {
        search: false,
      },
      loading: {
        search: false,
      },
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        sortColumn: undefined,
        sortOrder: undefined,
        id: undefined,
        idMin: undefined,
        idMax: undefined,
        parentId: undefined,
        parentIdMin: undefined,
        parentIdMax: undefined,
        parentTitle: undefined,
        title: undefined,
        description: undefined,
        version: undefined,
        versionMin: undefined,
        versionMax: undefined,
        createTime: undefined,
        createTimeMin: undefined,
        createTimeMax: undefined,
        updateTime: undefined,
        updateTimeMin: undefined,
        updateTimeMax: undefined,
        isActive: undefined,
        isActiveMin: undefined,
        isActiveMax: undefined,
      },
      dataDictCodes: ['YES_NO'],
      selects: {
        isActiveSelect: [],
      },
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
  },
  methods: {
    initDataDict() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'isActive',
              dataProp: 'isActiveSelect',
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    resetForm(excludeProps) {
      for (let key in this.searchForm) {
        if (excludeProps && excludeProps.includes(key)) {
          continue
        }
        this.searchForm[key] = undefined
      }
    },
    cancelDialog() {
      this.dialog.search = false
    },
    searchOkDialog() {
      this.dialog.search = false
      this.$emit('searchTable', true)
    },
  },
}
</script>

<style>
</style>